<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>
<!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
<link rel="stylesheet" href="/element/index.css">
<style type="text/css">
    .time {
        font-size: 13px;
        color: #999;
    }
    .bottom {
        margin-top: 10px;
        line-height: 13px;
    }
    .button {
        padding: 0;
        float: right;
        margin-top: 4px;
    }
    .image {
        width: 100%;
        display: block;
    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }
    body {
        background-color: #FAFAFA;
        padding: 0;
        margin: 0;
    }
    body,
    div,
    li,
    span {
        padding: 0;
        margin: 0;
    }
    .main {
        margin: 0 auto;
        width: 1024px;
    }
    .el-button {
        margin: 0 10px;
    }
    .el-card {
        width: calc(100% / 3 - 2*10px);
        margin: 10px;
        box-sizing: border-box;
        height: calc(220px + 170px);
        float: left;
        transition: 0.4s;

        border-radius: 12px;
        overflow: hidden;
    }
    .el-card:hover {
        transform: translateY(-10px);
    }
    .card-img-box {
        height: 220px;
        overflow: hidden;
        border: 1px solid #ccc;
    }
    .card-img-box img {
        height: 100%;
    }
    .card-content .item1 {
        height: calc(6 * 15px);
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6;
        overflow: hidden;
    }
    .add-box {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 140px;
    }
    .add-box .el-icon-circle-plus-outline {
        color: #CCCCCC;
        transition: 0.4s;
    }
    .add-box:hover .el-icon-circle-plus-outline {
        color: #409eff;
    }
</style>
<body>
<div id="app">
    <div class="main">

        <el-card :body-style="{ padding: '0px' }" v-for="(i,index) of directionInfo.list">
            <div class="card-img-box">
                <img :src="i.dir_coverUrl">
            </div>
            <div class="card-content" style="padding: 14px;">
                <span>{{i.dir_name}}</span>
                <span>--{{i.dir_tchName}}</span>
                <div class="bottom clearfix item1">
                    <time class="time">{{i.dir_Info}}</time>
                </div>
                <div class="clearfix button">
                    <el-button type="text" class="button" @click.native="removeMajor(index)">删除</el-button>
                    <el-button type="text" class="button" @click.native="openDialogFormVisible(index)" >编辑</el-button>
                </div>
            </div>
        </el-card>
        <el-card :body-style="{ padding: '0px' }" class="add-box" @click.native="openDialogFormVisible(null)">
            <div class="el-icon-circle-plus-outline"></div>
        </el-card>
    </div>
    <!-- 弹窗部分 start -->
    <el-dialog title="编辑方向" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="方向名称" :label-width="formLabelWidth">
                <el-input v-model="form.dir_name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="教师名称" :label-width="formLabelWidth">
                <el-input v-model="form.dir_tchName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="介绍" :label-width="formLabelWidth">
                <el-input v-model="form.dir_Info" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="封面链接" :label-width="formLabelWidth">
                <el-input v-model="form.dir_coverUrl" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="视频链接" :label-width="formLabelWidth">
                <el-input v-model="form.dir_videoUrl" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateMajor">确 定</el-button>
        </div>
    </el-dialog>
    <!-- 弹窗部分 end -->
</div>
</body>
</html>
<script src="/js/axios.min.js"></script>
<script src="/js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="/element/index.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    oldForm=null
    let vm = new Vue({
        el: "#app",
        data: {
            dialogFormVisible: false, //添加 或者 编辑模态框
            //用于清空form
            form: {
                dir_name: '',
                dir_tchName: '',
                dir_Info: '',
                dir_coverUrl: '',
                dir_videoUrl: '',
            },
            formLabelWidth: '80px',
            directionInfo: {
                list: [
                //     {
                //     dir_id:1,
                //     dir_videoUrl:  'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1666113102,1710971814&fm=26&gp=0.jpg',
                //     dir_coverUrl: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1666113102,1710971814&fm=26&gp=0.jpg',
                //     dir_Info: 'UI设计行业近几年在全球软件复业兴起，属于高薪技术设计产业。国内外众多大型IT企业(例如：百度、腾讯、Yahoo、中国移动、Nokia、联想、网易、微软、盛大、淘宝等众多企业)均已成立专业的制UI设计部门。目前来说该专业仍然是人才稀缺，人才资源争夺激烈。就业市场供不应求。',
                //     dir_tchName: '教师A',
                //     dir_name: '全栈工程师',
                // }
                ]
            }
        },
        created() {
            this.loadMajorList()
        },
        methods: {
            loadMajorList(){
                let formdata = new FormData();
                formdata.set('enctype', 'multipart/form-data');
                let url='api/getAllmajor';
                axios.post(url,formdata).then(res=>{
                    // console.log(res)

                    res= res.data
                    if (res.error_code==0){
                        res.data=res.data.reverse()
                        this.directionInfo.list=JSON.parse(JSON.stringify(res.data))
                    }
                })

            }
            ,
            // 清空form
            clearForm() {
                for (let i in this.form) {
                    this.form[i] = ''
                }
            },
            // 校验
            verifyForm() {
                let obj1 = {
                    dir_name: '方向名称',
                    dir_tchName: '方向教师名称',
                    dir_Info: '方向介绍',
                    dir_coverUrl: '封面链接',
                    dir_videoUrl: '视频链接',
                }
                // 校验所有值都不能为空
                for (let i in obj1) {
                    if (!this.form[i]) {
                        this.$message.warning(obj1[i] + '为空 请检查');
                        return false
                    }
                }
                return true
            },
            // 移除 当前志愿
            removeMajor(index) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let formdata = new FormData();
                    formdata.set('enctype', 'multipart/form-data');
                    formdata.set('dir_id', this.directionInfo.list[index].dir_id);
                    let url='/api/removeMajor'
                    axios.post(url,formdata).then(res=>{
                        res=res.data;
                        // console.log(res)
                        if (res.error_code==0){
                            this.directionInfo.list.splice(index, 1)
                            this.$message({
                                type: 'success',
                                message: '删除成功!',
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            updateMajor() {
                // 调用校验
                if (!this.verifyForm()) {
                    return
                }
                // 有下标  代表更新操作
                let index=null
                // 更新 简单校验
                if(this.form.index!==null){

                    if(JSON.stringify(this.form)==oldForm){
                        this.$message.error('与原数据一致')
                        return
                    }
                    index=this.form.index
                    delete this.form.index
                }

                let formdata = new FormData();
                formdata.set('enctype', 'multipart/form-data');
                for (let i in this.form){
                    if (i!=='index'){
                      formdata.set(i,this.form[i]);
                    }
                }
                let url ='api/changeMajor'
                axios.post(url,formdata).then(res=>{
                    res=res.data;
                    // console.log(res)
                    if (res.error_code==0){
                        this.dialogFormVisible=false
                        //更新
                        // console.log(index)
                        if (index!=null){
                            this.directionInfo.list[index]=res.data;
                            return
                        }else {
                            // console.log('-------')
                            //添加
                            this.directionInfo.list=[res.data,...this.directionInfo.list]
                        }
                    }
                })
            },

// 打开模态框
            openDialogFormVisible(index){
                //有index 为编辑 空则是添加
                this.clearForm()
                if(index!==null){
                    this.form=JSON.parse(JSON.stringify(this.directionInfo.list[index]))
                    this.form.index=index;
                    oldForm=JSON.stringify(this.form)
                }
                this.dialogFormVisible=true;//显示
            },
        }
    })

</script>
